<template>
	<div class="goods base-flex">
		<a :href="item.link" target="_black"
			><img class="goods-img" :src="item.pic | image_ali" alt=""
		/></a>
		<div class="info">
			<div class="title">
				<a :href="item.link" target="_black">{{ item.title }}</a>
			</div>
			<div class="name">{{ item.shopName }}</div>
			<div class="type">
				<div>类别：{{ item.mainName }}</div>
				<div>
					原价：<span style="color:#F14D27">￥{{ item.price | toFixed(2) }}</span>
				</div>
				<div>
					券后价：<span style="color:#F14D27">￥{{ item.endPrice | toFixed(2) }}</span>
				</div>
			</div>
			<div class="id">商品ID：{{ item.gid }}</div>
			<div>
				商品类型：
				<span v-if="item.rateType == 0">通用</span>
				<span v-if="item.rateType == 1">定向</span>
				<span v-if="item.rateType == 2">高佣</span>
				<span v-if="item.rateType == 3">营销计划</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {
					price: 0,
					endPrice: 0
				};
			}
		}
	},
	mounted() {},

	methods: {}
};
</script>
<style lang="scss">
.goods {
	.goods-img {
		min-width: 94px;
		height: 91px;
		border-radius: 5px;
		overflow: hidden;
	}
	.info {
		font-size: $font12;
		color: $text-grey;
		text-align: left;
		margin-left: 10px;
		width: calc(100% - 110px);
		.title {
			color: #333333;
			font-weight: bold;
			font-size: $font14;
			@include ellipsis(1);
			a {
				color: $text-title;
			}
			cursor: pointer;
			:hover {
				color: $color-link;
			}
		}
		.name {
			color: #666666;
		}
		.type {
			@include flexBox(space-between, center);
		}
	}
}
</style>
